<template>
  <div class="Shop">
    <cardheader></cardheader>
    <!-- 购物车 结算-->
    <div class="cardShop">
      <div class="cardShopList" v-for="(item, index) in Shop" :key="index">
        <div class="cardShopList-left">
          <img
            :src="pics[index]"
            alt=""
            class="icon"
            @click="checkboxChange(item, index)"
          />
        </div>
        <p v-show="1 == 2">{{ a }}</p>
        <div class="cardShopList-center">
          <img :src="item.Imgurl" alt="" />
        </div>
        <div class="cardShopList-right">
          <div class="name">{{ item.Title }}</div>
          <div class="price_line">
            <div class="price">
              ￥<em class="int">{{ item.Price }}</em
              >{{ item.PriceDecimal }}
            </div>
            <div class="num_wrap">
              <span
                :class="item.quantum <= 1 ? 'sub' : 'sub sub1'"
                @click="sub(item, index)"
              ></span>
              <input type="text" :value="item.quantum" />
              <span class="add" @click="add(item, index)"></span>
            </div>
          </div>
          <div class="action">
            <div class="action_item">
              <span>{{ item.Follow }}</span>
              <span @click="del(item, index)">{{ item.delete }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="cardShopTitle">
      <span class="Title">&emsp;可能你还想要&ensp;</span>
    </div>
    <!-- 购物车列表 -->
    <div class="shopList">
      <ul>
        <li v-for="(item, index) in cardShopList" :key="index">
          <div class="img">
            <img :src="item.Imgurl" alt="" />
          </div>
          <div class="listbottom">
            <div class="text">
              {{ item.Title }}
            </div>
            <div class="button">
              <div class="price">￥{{ item.Price }}</div>
              <div class="picture" @click="addCard(item)"></div>
            </div>
          </div>
        </li>
      </ul>
    </div>

    <p v-show="1 == 2">{{ a }}</p>
    <div style="height: 7.5rem"></div>
    <div
      class="ShopCardBottom"
      style="display: flex; justify-content: space-around; align-items: center"
    >
      <div style="display: flex">
        <img :src="checkbox" alt="" class="icon" @click="allcheckboxChange()" />
        <span class="all">全选</span>
        <p v-show="1 == 2">{{ tol }}</p>
      </div>
      <div
        style="
          display: flex;
          justify-content: space-between;
          width: 14.375rem;
          align-items: center;
        "
      >
        <div style="font-size: 0.875rem">
          总计:<span style="font-weight: bold">￥{{ total }}.00</span>
        </div>
        <div class="boy" :class="allNum > 0 ? 'opc' : ''">
          去结算 <span>({{ allNum }}件)</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
let click = true;
import cardheader from "../components/Card/cardHeader.vue";
export default {
  name: "ShopCard",
  components: {
    cardheader: cardheader,
  },
  data: () => ({
    checkbox: "src/assets/images/icon.png",
    total: 0,
    Shop: [],
    allShop: 0,
    allNum: 0,
    icon: "src/assets/images/icon.png",
    iconSelect: "src/assets/images/icon_selected.png",
    cardShopList: [],
    shop: [],
    pics: [],
    lessen: [],
    a: 0,
    all: false,
  }),
  mounted() {
    let that = this;
    let url = "http://localhost:5000";
    this.$http
      .get(url + "/data/Shop.json")
      .then(function (response) {
        console.log(response);
        that.Shop = response.data.Shop.map((i) => ({
          //购物车
          Imgurl: url + i["Imgurl"],
          Title: i["Title"],
          Price: i["Price"],
          Follow: i["Follow"],
          delete: i["delete"],
          quantum: i["quantum"],
          total: i["total"],
          check: i["check"],
        }));
        that.cardShopList = response.data.SP.map((i) => ({
          //购物车列表
          Imgurl: url + i["Imgurl"],
          Title: i["Title"],
          Price: i["Price"],
          Follow: i["Follow"],
          delete: i["delete"],
          quantum: i["quantum"],
          total: i["total"],
          check: i["check"],
        }));
        for (var i = 0; i < that.Shop.length; i++) {
          that.pics.push("src/assets/images/icon.png");
          that.lessen.push("");
        }
        //  console.log(that.$store.state.list);
        if (that.$store.state.list.length != 0) {
          that.Shop.forEach((item, index) => {
            that.$store.state.list.forEach((i) => {
              if (item == i) {
                console.log(1111);
                item.quantum++;
                //alltotal(item,index);
              } else {
                //console.log(2222);
                that.Shop.push(i);
                that.pics.push("src/assets/images/icon.png");
                that.lessen.push("");
              }
            });
          });
        }
      })
      .catch(function (error) {
        console.log(error);
      })
      .then(function () {
        // always executed
      });
  },
  computed: {
    tol() {
      let Shop = this.Shop.filter((item) => item.check == true);
      // console.log(Shop);
      this.total = 0;
      this.allNum = 0;
      Shop.forEach((item, index) => {
        this.total += item.total;
        this.allNum += item.quantum;
      });
      return this.total;
    },
  },
  methods: {
    // 全选
    allcheckboxChange() {
      if (this.checkbox == this.icon) {
        this.checkbox = this.iconSelect;
        for (var i = 0; i < this.pics.length; i++) {
          this.pics[i] = this.iconSelect;
        }
        this.Shop.forEach((item) => {
          item.check = true;
        });
      } else {
        this.checkbox = this.icon;
        for (var i = 0; i < this.pics.length; i++) {
          this.pics[i] = this.icon;
        }
        this.Shop.forEach((item) => {
          item.check = false;
        });
      }
    },
    //单选
    checkboxChange(item, index) {
      this.a++;
      if (click == true) {
        this.pics[index] = this.iconSelect;
        //console.log(11111);
        click = false;
        this.total += item.total;
        item.check = true;
        //console.log(item.check);
        this.isAllCheck();
      } else {
        this.pics[index] = this.icon;
        click = true;
        item.check = false;
        this.total -= item.total;
        this.isAllCheck();
      }
    },
    //数量增加
    add(item, index) {
      item.quantum++;
      item.total = item.Price * item.quantum;
      this.pics[index] = this.iconSelect;
      item.check = true;
    },
    //数量减少
    sub(item, index) {
      if (item.quantum > 1) {
        item.quantum--;
      } else {
        item.quantum = 1;
      }

      item.total = item.Price * item.quantum;
    },
    //添加购物车
    addCard(item) {
      let result = this.Shop.find((v) => v.Title == item.Title);
      if (result) {
        item.quantum++;
        item.total = item.Price * item.quantum;
      } else {
        this.Shop.push(item);
        this.pics.push(this.iconSelect);

        item.check = true;
      }
    },

    //删除
    del(item, index) {
      if (this.pics[index] == this.iconSelect) {
        this.total -= item.total;
        this.allNum -= item.quantum;
      }
      let arr = (curr) => curr == this.iconSelect;
      this.Shop.splice(index, 1);
      this.pics.splice(index, 1);
      if (this.pics.every(arr)) {
        this.checkbox = this.iconSelect;
      } else {
        this.checkbox = this.icon;
      }
      if (this.pics.length == 0) {
        this.checkbox = this.icon;
      }
    },
    //判断全选全不选
    isAllCheck() {
      for (let i = 0; i < this.pics.length; i++) {
        if (Object.is(this.iconSelect, this.pics[i])) {
          this.checkbox = this.iconSelect;
        } else {
          this.checkbox = this.icon;
        }
      }
    },
  },
};
</script>

<style scoped lang="less">
// 购物车结算
@w: 1.9375rem;
@h: 1.9375rem;

.icon {
  width: @w;
  height: @h;
  border-radius: 50%;
}
.cardShop {
  width: 100vw;
}
.cardShopList {
  width: 100vw;
  height: 10.8125rem;
  background: #ffffff;
  margin-bottom: 0.3125rem;
  border-radius: 1rem;
  display: flex;

  align-items: center;
}
.cardShopList-left {
  width: 3rem;
  height: 6.25rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
.cardShopList-right {
  width: 12.1875rem;
  height: 6.25rem;
  padding: 0rem 0.625rem;
}
.name {
  width: 12.1875rem;
  height: 2rem;
  text-align: left;
  font-size: 0.75rem;

  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.cardShopList-center {
  width: 6.25rem;
  height: 6.25rem;
  background: blue;
}
.cardShopList-center img {
  width: 100%;
}
.price_line {
  width: 12.1875rem;
  height: 1.6875rem;
  padding: 0.625rem 0;
  display: flex;
  justify-content: space-between;
}
.price {
  font-size: 0.75rem;
  width: 8.0625rem;
  text-align: left;
  color: #f2270c;
}
.int {
  font-size: 1rem;
  font-style: normal;
}
.num_wrap {
  display: flex;
  align-items: center;
}
.num_wrap input {
  outline: none;
  width: 2.25rem;
  height: 0.9375rem;
  background: #f2f2f2;
  border: none;
  text-align: center;
}
.num_wrap span {
  color: #262626;
  font-size: 1.25rem;
  font-weight: bold;
}
.add {
  display: inline-block;
  width: 0.9375rem;
  height: 0.9375rem;
  background: url()
    no-repeat;
  background-size: 100% 100%;
}
.sub {
  display: inline-block;
  width: 0.9375rem;
  height: 0.9375rem;
  background: url()
    no-repeat;
  background-size: 100% 100%;
}
.action {
  width: 12.1875rem;
  height: 0.9375rem;
  padding-top: 0.625rem;
  padding-left: 0.9375rem;
  display: flex;
  flex-direction: row-reverse;
}
.action_item {
  position: relative;
}
.action_item span {
  height: 0.875rem;
  font-size: 0.625rem;
  width: 2.125rem;
  padding: 0rem 0.625rem;
}
.action_item span:nth-child(1) {
  width: 4.25rem;
}
.action_item span:nth-child(1):after {
  content: "";
  width: 0.0625rem;
  height: 0.9375rem;
  background: #262626;
  margin-left: 0.625rem;
  position: absolute;
  top: 0.125rem;
  transform-origin: 100% 50%;
  transform: scaleX(0.5);
}
.sub1 {
  background-image: url();
}

// 主页
.icon {
  width: 1.9375rem;
  height: 1.9375rem;
}
.all {
  line-height: 1.875rem;
  font-size: 0.75rem;
}
.nut-checkbox.nut-checkbox-size-base .nut-checkbox-label {
  font-size: 0.75rem !important;
}
.Shop {
  width: 100vw;
  height: 100vh;
  background: #f2f2f2;
  overflow: scroll;
}
.ShopCardBottom {
  width: 100vw;
  height: 3.125rem;
  background: hsla(0, 0%, 100%, 0.95);
  position: fixed;
  bottom: 8vh;
}
.Shop::-webkit-scrollbar {
  display: none;
}
.Title {
  position: relative;
  background: #f7f7f7;
  position: relative;
  z-index: 2;
  font-size: 0.625rem;
  color: #999999;
}
.Title:before,
.Title:after {
  content: "";
  position: absolute;
  top: 50%;
  margin-top: -2px;
  width: 0.25rem;
  height: 0.25rem;
  background-color: #ccc;
  transform: rotate(45deg);
}
.cardShopTitle {
  margin: 0.9375rem 0;
  position: relative;
}
.cardShopTitle:after {
  content: "";
  width: 22.1875rem;
  margin: 0rem 0.625rem;
  position: absolute;
  z-index: 1;
  pointer-events: none;
  background-color: #ccc;
  height: 0.0625rem;
  left: 0;
  right: 0;
  top: 0.625rem;
}
.boy {
  width: 7.0625rem;
  height: 2.375rem;
  background: #f2270c;
  color: #fff;
  border-radius: 1.25rem;
  font-size: 0.875rem;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0.5;
}
.shopList {
  width: 23.4375rem;
}
.shopList ul {
  width: 100%;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.shopList ul li {
  width: 11.6875rem;
  height: 15.5rem;
  margin-bottom: 0.3125rem;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  background: #ffffff;
  border-radius: 0.3125rem;
}
.img {
  width: 9.8125rem;
  height: 9.8125rem;
}
.img img {
  width: 100%;
}
.listbottom {
  width: 9.8125rem;
  height: 3.6875rem;
}
.text {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-size: 0.75rem;
}
.button {
  padding-top: 0.3125rem;
  width: 9.8125rem;
  display: flex;
  justify-content: space-between;
}
.price {
  color: #e93b3d;
}
.picture {
  width: 1.875rem;
  height: 1.5rem;
  background: url("")
    no-repeat 50%;
  background-size: 0.9375rem;
}
.opc {
  opacity: 1;
}
</style>